<template>
    <div>
        <el-row :gutter="16">
            <el-col :span="6" :offset="0">
                <el-card shadow="never" class="border-1">
                    <!-- card body -->
                    <div class="flex items-center center">
                        <div class="mr-4 text-gray-500"><el-icon class="text-gray-500 text-xl rounded-full bg-gray-100 w-10 h-10 one"><Document /></el-icon></div>
                        <div class="itemp">
                            <div class="text-gray-500">文章</div>
                            <CountTo class="textone" :value="articleTotalCount"></CountTo>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" :offset="0">
                <el-card shadow="never" :body-style="{ padding: '20px' }" class="border-1">
                    <div class="flex items-center center">
                        <div class="mr-4 text-gray-500"><el-icon class="text-gray-500 text-xl rounded-full bg-gray-100 w-10 h-10 two"><Folder /></el-icon></div>
                        <div class="itemp">
                            <div class="text-gray-500">分类</div>
                            <CountTo class="texttwo" :value="categoryTotalCount"></CountTo>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" :offset="0">
                <el-card shadow="never" :body-style="{ padding: '20px' }" class="border-1">
                    <div class="flex items-center center">
                        <div class="mr-4 text-gray-500"><el-icon class="text-gray-500 text-xl rounded-full bg-gray-100 w-10 h-10 three"><PriceTag /></el-icon></div>
                        <div class="itemp">
                            <div class="text-gray-500">标签</div>
                            <CountTo class="textthree" :value="tagTotalCount"></CountTo>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6" :offset="0">
                <el-card shadow="never" :body-style="{ padding: '20px' }" class="border-1">
                    <div class="flex items-center center">
                        <div class="mr-4 text-gray-500"><el-icon class="text-gray-500 text-xl rounded-full bg-gray-100 w-10 h-10 four"><View /></el-icon></div>
                        <div class="itemp">
                            <div class="text-gray-500">浏览</div>
                            <CountTo class="textfour" :value="pvTotalCount"></CountTo>
                        </div>
                    </div>
                </el-card>
            </el-col>
            
        </el-row>

        <el-row :gutter="20" class="mt-5">
            <el-col :span="24" :offset="0">
                <HeatmapChart></HeatmapChart>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mt-5">
            <el-col :span="16" :offset="0">
                <PVChart></PVChart>
            </el-col>
            <el-col :span="8" :offset="0">
                <ArticleChart></ArticleChart>
            </el-col>
        </el-row>
        
    </div>


</template>

<script setup>
import CountTo from '@/components/CountTo.vue'
import PVChart from '@/components/PVChart.vue'
import ArticleChart from '../../components/ArticleChart.vue'
import HeatmapChart from '../../components/HeatmapChart.vue'
import { ref } from 'vue'
import { getDashboardArticleStatisticsInfo } from '@/api/admin/dashboard'


const articleTotalCount = ref(0)
const categoryTotalCount = ref(0)
const tagTotalCount = ref(0)
const pvTotalCount = ref(0)

getDashboardArticleStatisticsInfo().then((e) => {
    if (e.success) {
        articleTotalCount.value = e.data.articleTotalCount
        categoryTotalCount.value = e.data.categoryTotalCount
        tagTotalCount.value = e.data.tagTotalCount
        pvTotalCount.value = e.data.pvTotalCount
    }
})


</script>

<style scope>
.w-10 {
    width: 3.5rem!important;
}

.h-10 {
    height: 3.5rem!important;
}
.mr-4 .el-icon {
    font-size: 1.5rem;
}
.center {
  overflow: hidden;
}
.textone{
    color: #36a3f7;
}
.texttwo {
    color: #f4516c;
}
.textthree {
    color: #34bfa3;
}
.textfour {
    color: #4f84ce;
}
.center:hover .one{
    background-color: #36a3f7;
}
.center:hover .two{
    background-color: #f4516c;
}
.center:hover .three{
    background-color: #34bfa3;
}
.center:hover .four{
    background-color: #4f84ce;
}
.center:hover .el-icon{
    color: white;
}

.itemp {
  margin: auto;
  text-align: center;
  font-weight: bold;
  color: rgb(98, 97, 97);
}
</style>


